<template>
  <view class="container1">
    <view class="header">
      <view class="search-box">
        <view class="search-input" @tap="showSearch = true">
          <image src="/static/images/common/search-icon.png" class="search-icon" />
          <view>搜索</view>
        </view>
      </view>
      <view class="center">
        <view class="store">
          <view class="title">
            <image src="/static/images/common/star_normal.png" class="left-icon" />
            <view class="address" @tap="jumpTableList">
              店内就餐
              <text v-if="table_num">{{ " 桌号：" + table_num }}</text>
              <text v-else> ：点击选择桌号</text>
            </view>
            <image src="/static/images/common/black_arrow_right.png" class="right-icon" />
          </view>
          <view class="buttons"> 店内就餐 </view>
        </view>
      </view>

      <!-- 滚动公告栏 begin -->
      <view class="notices">
        <swiper class="swiper" autoplay vertical :interval="3000" :duration="1000" circular>
          <swiper-item v-for="(notice, index) in notices" :key="index" @tap="jump_notice(notice.id)">
            <view class="swiper-item">
              <image src="../../static/icon-img/notice.png" class="image"></image>
              <view class="content" v-html="notice.title"></view>
            </view>
          </swiper-item>
        </swiper>
        <view class="more"> </view>
      </view>
    </view>
    <view class="main">
      <scroll-view class="menu-bar" scroll-y scroll-with-animation>
        <view class="wrapper">
          <view class="menu-item" @tap="handleMenuSelected(category.id)"
            :class="{ active: currentCategoryId == category.id }" v-for="(category, index) in categories"
            :key="category.id">
            <image :src="category.image" class="image" mode="aspectFill" />
            <view class="title">{{ category.cateName }}</view>
          </view>
        </view>
      </scroll-view>
      <!-- 左侧菜单 end -->
      <!-- 右侧商品列表 begin -->
      <scroll-view class="product-section" scroll-y scroll-with-animation :scroll-top="productsScrollTop"
        @scroll="productsScroll">
        <view class="wrapper">
          <view id="ads">
            <!-- 广告栏1 begin -->
            <swiper class="ads1" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" circular>
              <swiper-item v-for="(ad, index) in ads1" :key="index">
                <image :src="ad.image" class="image" mode="widthFix"></image>
              </swiper-item>
            </swiper>
            <!-- 广告栏1 end -->
          </view>
          <!-- 商品 begin -->
          <view class="products-list">
            <view class="products">
              <!-- 商品块 -->
              <view class="product" v-for="product in productList" :key="product.id"
                @tap="showProductDetailModal(product)">
                <image :src="product.image" mode="widthFix" class="image" />
                <view class="content">
                  <view class="name">{{ product.name }}</view>
                  <view class="description">{{ product.keyword }}</view>
                  <view class="price">
                    <view>￥{{ product.vipPrice }}</view>
                    <view v-show="product.cartNumber > 0" class="number">
                      +{{ product.cartNumber }}</view>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </scroll-view>
    </view>
    <ProductModal :product="product" :visible="productModalVisible" @cancel="closeProductDetailModal"
      @add-to-cart="handleAddToCartInModal" />
    <Search :show="showSearch" :hotSearch="hotSearch" :categories="categories" @hide="showSearch = false"
      @choose="showProductDetailModal" />

    <shopCarAnimation ref="carAnmation" cartx="0.58" carty="1.1"></shopCarAnimation>
    <Cart></Cart>
  </view>
</template>

<script>
import ProductModal from "./components/product-modal/product-modal";
import Search from "./components/search/search";
import shopCarAnimation from "@/components/fly-in-cart/fly-in-cart.vue";
import { getCategory, getMsg, getSwiper, getProducts } from "@/api/index.js";
import Cart from "./components/cart/index.vue";
import { mapState } from "vuex";
import uNumberBox from "@/uni_modules/uni-number-box/components/uni-number-box/uni-number-box.vue";

export default {
  components: {
    ProductModal,
    Search,
    shopCarAnimation,
    Cart,
    uNumberBox,
  },
  data() {
    return {
      hotSearch: [],
      getimg: this.$getimg,
      categories: [],
      productList: [],
      product: {},

      currentCategoryId: "",

      notices: [
        { id: 1, title: "测试111" },
        { id: 2, title: "测试1112" },
      ],

      ads1: [],

      productModalVisible: false,
      productsScrollTop: 0,

      showSearch: false,
      table_num: "",
    };
  },
  computed: {
    ...mapState(["cart"]),
  },
  async onLoad(options) {
    if (options.table_num) {
      this.table_num = options.table_num;
      uni.setStorageSync("table_num", options.table_num);
    } else {
      this.table_num = uni.getStorageSync("table_num");
    }

    if (options.invitationCode) {
      console.log("朋友邀请来的");
      uni.showToast({
        title: "朋友邀请来的",
        duration: 2000,
      });
      console.log("invitationCode", options.invitationCode);
    }

    this.get_category();
    this.get_swiper();
    this.get_msg();
    this.get_product();
  },
  async onShow(options) { },
  methods: {
    async get_msg() {
      let res = await getMsg();
      if (res.code == 200) {
        this.notices = res.data.list;
      }
    },
    async get_category() {
      let res = await getCategory();
      if (res.code == 200) {
        this.categories = res.data.categories;
      }
    },
    async get_swiper() {
      let res = await getSwiper();
      if (res.code == 200) {
        this.ads1 = res.data.banners;
      }
    },
    async get_product() {
      let res = await getProducts({
        cateId: this.currentCategoryId,
      });
      if (res.code == 200) {
        this.productList = res.data.products.map((item) => {
          return {
            ...item,
            number: 0,
            cartNumber: 0,
          };
        });

        this.productList.forEach((item) => {
          this.cart.map((cartItem) => {
            if (cartItem.id == item.id) {
              item.number = cartItem.cartNumber;
              item.cartNumber = cartItem.cartNumber;
            }
          });
        });
      }
    },
    showProductDetailModal(product) {
      if (product.id == 73 || product.id == 74) {
        uni.navigateTo({
          url: `/pages/order/ballConfirm?ids=${product.id}&nums=1&hide=1`
        });
        return
      }

      this.product = product;
      this.productModalVisible = true;
    },
    handleAddToCartInModal(product) {
      console.log("%c [ product ]-186", "font-size:13px; background:#333333; color:#f3f3f3;", product);
      product.cartNumber = product.number;
      // 将下单产品添加到购物车
      this.$store.commit("PUSH_CART", product);
      this.productModalVisible = false;
    },
    closeProductDetailModal() {
      this.product = {};
      this.productModalVisible = false;
    },
    openCartDetailsPopup() { },
    clearCart() { },
    handleMenuSelected(id) {
      if (this.currentCategoryId != id) {
        this.currentCategoryId = id;
        this.get_product();
      } else {
        this.currentCategoryId = "";
        this.get_product();
      }
    },
    productsScroll({ detail }) { },
    calcSize() { },
    pay() { },
    //数据重组
    jumpTableList() {
      uni.navigateTo({
        url: "../table_list/table_list",
      });
    },
    // 获取公告
    getNoticeAll() { },
    // 点击公告跳转
    jump_notice(id) {
      uni.navigateTo({
        url: "../article/article?id=" + id,
      });
    },
  },
  onShareAppMessage() { },
};
</script>

<style lang="scss">
@import "./index.scss";

uni-page-head {
  display: none;
}

.number {
  font-size: 24rpx;
  font-weight: normal;
}

.address {
  color: #ffffff;
}

.menu-item {
  background-color: #060431;

  .title {
    color: #ffffff;
  }
}

.wrapper {
  background-color: #060431;

}

.menu-bar {
  background-color: #060431;

}
</style>
